تثبيت نطاق المخطط الزمني للتمرير في CSS: إتقان حدود نطاق الرسوم المتحركة

لقد أحدث ظهور المخططات الزمنية للتمرير في CSS ثورة في كيفية تعاملنا مع الرسوم المتحركة، مما مكنها من أن تكون مدفوعة مباشرة بتقدم التمرير. وهذا يوفر تجربة مستخدم أكثر سلاسة وبديهية. ومع ذلك، كما هو الحال مع أي أداة قوية، فإن التحكم الدقيق في سلوكها أمر بالغ الأهمية لتحقيق نتائج مصقولة. وهنا يأتي دور تثبيت نطاق المخطط الزمني للتمرير في CSS، وهي ميزة متطورة تتيح للمطورين تحديد وفرض حدود صارمة لوقت حدوث الرسوم المتحركة ضمن المخطط الزمني للتمرير.

في السابق، قد تبدأ الرسوم المتحركة المدفوعة بالتمرير عن غير قصد في وقت مبكر جدًا أو تستمر لوقت متأخر جدًا، مما يؤدي إلى تأثيرات بصرية مزعجة أو فرص ضائعة للتفاعلات الجذابة. يحل تثبيت النطاق هذه المشكلة من خلال تزويد المطورين بالقدرة على تحديد نطاق دقيق داخل الحاوية القابلة للتمرير حيث يجب أن تكون الرسوم المتحركة نشطة. سيتعمق هذا المقال في مفهوم تثبيت النطاق في المخططات الزمنية للتمرير في CSS، مستكشفًا صياغته وتطبيقاته العملية، وكيف يمكّنك من إنشاء رسوم متحركة أكثر قوة وتطورًا على الويب.

فهم المخططات الزمنية للتمرير في CSS

قبل أن نتعمق في تثبيت النطاق، من المفيد تقديم ملخص موجز للمخططات الزمنية للتمرير في CSS. تتيح لك المخططات الزمنية للتمرير ربط تقدم الرسوم المتحركة مباشرة بموضع التمرير لعنصر ما (مثل منفذ عرض المستند الرئيسي أو حاوية محددة قابلة للتمرير). بدلاً من نسبة مئوية من مدة الرسوم المتحركة، يتم تحديد تقدم الرسوم المتحركة بمدى تمرير العنصر القابل للتمرير.

يكمن جوهر هذه الوظيفة في خاصية animation-timeline في CSS. يمكن تعيينها على auto (والتي تكون افتراضيًا أقرب سلف قابل للتمرير، وغالبًا ما يكون منفذ العرض) أو على اسم مخطط زمني للتمرير محدد.

خذ بعين الاعتبار مثالاً بسيطًا:

            
.animated-element {
  animation: myScrollAnimation linear;
  animation-timeline: scroll(block nearest);
}

            

              
                Copy
              
            
          

في هذا المقتطف، سيتقدم myScrollAnimation كلما قام المستخدم بتمرير أقرب حاوية قابلة للتمرير. ومع ذلك، بدون تثبيت النطاق، قد تبدأ هذه الرسوم المتحركة بمجرد أن يصبح العنصر مرئيًا وتستمر حتى يختفي تمامًا، مما قد يمتد على مساحة تمرير أكبر بكثير من المقصود.

ما هو تثبيت النطاق في المخططات الزمنية للتمرير؟

تثبيت النطاق، المعروف رسميًا باسم التحكم في نطاق الرسوم المتحركة المدفوعة بالتمرير، يقدم مفهوم تحديد نطاق تمرير محدد للرسوم المتحركة. يحدد هذا النطاق متى يجب أن تكون الرسوم المتحركة نشطة بالنسبة للمسافة الإجمالية القابلة للتمرير في الحاوية. عندما يقع موضع التمرير خارج هذا النطاق المحدد، ستتوقف الرسوم المتحركة فعليًا أو تعود إلى حالة البداية/النهاية، مما يضمن أنها تتحرك فقط ضمن الحدود التي حددها المطور.

هذا قوي بشكل خاص للسيناريوهات التي تريد فيها حدوث الرسوم المتحركة فقط خلال مرحلة معينة من التمرير، مثل:

• الكشف عن عنصر فقط عند دخوله قسمًا معينًا من منفذ العرض.
• إطلاق انتقال فقط عندما يتجاوز المستخدم نقطة معينة في التمرير.
• ضمان اكتمال الرسوم المتحركة ضمن الحدود المرئية لحاويتها، مما يمنعها من الامتداد عبر الصفحة بأكملها.

صياغة تثبيت النطاق

يتم تنفيذ تثبيت النطاق باستخدام خاصية animation-range، والتي تعمل بالاقتران مع animation-timeline. تقبل خاصية animation-range قيمتين، تمثلان نقطتي البداية والنهاية لنطاق التمرير.

فهم قيم النطاق

عادةً ما يتم التعبير عن قيم animation-range كنسب مئوية أو كلمات رئيسية تشير إلى أبعاد الحاوية القابلة للتمرير. الوحدات الأكثر شيوعًا وبديهية هي:

• النسبة المئوية (%): نسبة مئوية من ارتفاع الحاوية القابلة للتمرير (للمحاور الكتلية) أو عرضها (للمحاور المضمنة). تشير 0% إلى بداية منطقة التمرير، وتشير 100% إلى نهايتها.
• الكلمات الرئيسية:
• cover: يمثل البعد القابل للتمرير بأكمله.
• contain: يمثل أيضًا البعد القابل للتمرير بأكمله.

صياغة animation-range هي:

            
animation-range: [ <length-percentage> | cover | contain ] [ <length-percentage> | cover | contain ]

            

              
                Copy
              
            
          

بشكل أكثر شيوعًا، ستراها محددة بقيمتين مميزتين، تحددان بداية ونهاية النطاق:

            
animation-range: start-value end-value;

            

              
                Copy
              
            
          

سيناريوهات وأمثلة شائعة للنطاق

دعنا نستكشف طرقًا مختلفة لاستخدام animation-range:

1. تحريك العنصر عند دخوله وخروجه من منفذ العرض

حالة استخدام شائعة جدًا هي تحريك عنصر أثناء تمريره ليصبح مرئيًا ثم تحريكه مرة أخرى ليخرج من العرض. سيكون النطاق النموذجي من النقطة التي تلامس فيها الحافة العلوية للعنصر أسفل منفذ العرض إلى النقطة التي تغادر فيها حافته السفلية أعلى منفذ العرض.

لهذا الغرض، غالبًا ما نستخدم كلمات رئيسية مثل entry و exit، وهي اختصارات لقيم نسب مئوية محددة بالنسبة للحاوية القابلة للتمرير.

• entry: تشير إلى النقطة التي يدخل فيها العنصر منفذ التمرير (scrollport) (على سبيل المثال، أسفل العنصر عند أسفل منفذ العرض).
• exit: تشير إلى النقطة التي يخرج فيها العنصر من منفذ التمرير (على سبيل المثال، أعلى العنصر عند أعلى منفذ العرض).

لذا، لتحريك عنصر أثناء دخوله وخروجه بالكامل من منفذ العرض:

            
.reveal-on-scroll {
  animation-name: fadeIn;
  animation-timeline: scroll(block nearest);
  animation-range: entry exit;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

            

              
                Copy
              
            
          

يضمن هذا التكوين أن يتم تعيين الرسوم المتحركة fadeIn (من شفافية 0% إلى 100%) بدقة لمسافة التمرير بين دخول العنصر منفذ العرض وخروجه منه. عندما يكون العنصر خارج العرض تمامًا، سيتم تحديد تقدم الرسوم المتحركة عند 100% أو 0%، مما يؤدي إلى تجميده فعليًا.

2. التحريك ضمن نسبة مئوية محددة من المنطقة القابلة للتمرير

يمكنك تحديد نطاق باستخدام نسب مئوية من الارتفاع الكلي القابل للتمرير. على سبيل المثال، لتحريك عنصر فقط خلال الـ 50% الوسطى من المنطقة القابلة للتمرير:

            
.mid-scroll-animation {
  animation-name: slideIn;
  animation-timeline: scroll(block nearest);
  animation-range: 25% 75%;
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

            

              
                Copy
              
            
          

هنا، سيتم تشغيل الرسوم المتحركة slideIn من علامة 25% من إجمالي ارتفاع التمرير إلى علامة 75%. قبل 25%، ستكون الرسوم المتحركة في حالتها from (translateX(-100%)). بعد 75%، ستكون في حالتها to (translateX(0)).

3. التحريك بناءً على موضع العنصر داخل حاويته

في بعض الأحيان، تريد أن تكون الرسوم المتحركة مدفوعة بموضع العنصر بالنسبة لحاويته الخاصة، وليس المستند بأكمله. يمكن لدالة scroll() أن تأخذ مرجعًا لعنصر محدد.

            
.scrolling-container {
  overflow-y: scroll;
  height: 500px;
}

.fixed-element-animation {
  animation-name: backgroundColorChange;
  animation-timeline: scroll(block #scrolling-container);
  animation-range: 0% 50%; /* Animate within the first half of the container's scroll */
}

@keyframes backgroundColorChange {
  from { background-color: lightblue; }
  to { background-color: lightgreen; }
}

            

              
                Copy
              
            
          

في هذا المثال، #scrolling-container هو العنصر الذي يقود موضع تمريره الرسوم المتحركة. ستحدث الرسوم المتحركة عندما يقوم المستخدم بالتمرير ضمن أول 50% من الارتفاع القابل للتمرير لـ #scrolling-container.

4. استخدام الكلمات الرئيسية لنطاقات أكثر تعبيرًا

الكلمات الرئيسية entry و exit قوية. يمكنك أيضًا دمجها مع نسب مئوية أو كلمات رئيسية أخرى لإنشاء نطاقات أكثر دقة.

• entry 100%: تبدأ الرسوم المتحركة عندما يدخل العنصر منفذ التمرير وتستمر حتى يتم تمرير منفذ التمرير بنسبة 100% من ارتفاع الحاوية (أي أن العنصر قد خرج تمامًا من العرض من الأسفل).
• 0% exit: تبدأ الرسوم المتحركة من بداية المنطقة القابلة للتمرير وتنتهي عندما يخرج العنصر من منفذ التمرير.
• entry cover: هذا يشبه entry exit للعديد من الأغراض العملية، ويغطي رحلة التمرير الكاملة للعنصر.

فكر في تحريك شريط تقدم يمتلئ أثناء تمرير المستخدم:

            
.progress-bar {
  animation-name: fillProgress;
  animation-timeline: scroll(block nearest);
  animation-range: 0% exit;
}

@keyframes fillProgress {
  from { width: 0%; }
  to { width: 100%; }
}

            

              
                Copy
              
            
          

هنا، يبدأ شريط التقدم بعرض 0% ويتحرك إلى عرض 100% بينما يقوم المستخدم بالتمرير من بداية المنطقة القابلة للتمرير حتى يخرج العنصر تمامًا من العرض. هذا سيناريو كلاسيكي لمؤشرات التقدم المدفوعة بالتمرير.

5. التثبيت لأقسام محددة

قد ترغب في أن تحدث الرسوم المتحركة فقط ضمن قسم معين من الصفحة، بغض النظر عن طول التمرير الإجمالي. يمكنك تحقيق ذلك عن طريق تحديد نطاق يمتد على جزء من ارتفاع التمرير للقسم بالنسبة لموضعه في المستند.

            
.section-animation {
  animation-name: highlightSection;
  animation-timeline: scroll(block nearest);
  animation-range: 40% 60%; /* Animate when the element is between 40% and 60% of its container's scroll */
}

@keyframes highlightSection {
  from { background-color: yellow; }
  to { background-color: transparent; }
}

            

              
                Copy
              
            
          

سيؤدي هذا إلى تطبيق تأثير التمييز فقط عندما يكون العنصر في موضع بين علامة 40% و 60% من ارتفاع التمرير لحاويته. خارج هذا النطاق، ستبقى خلفيته غير متأثرة (أو تعود إلى حالتها الافتراضية/قبل الرسوم المتحركة).

التحكم المتقدم في النطاق والحالات الخاصة

يوفر تثبيت النطاق تحكمًا دقيقًا، ولكن فهم الفروق الدقيقة فيه هو مفتاح إتقانه.

تحديد المحور

بشكل افتراضي، يشير scroll(block nearest) إلى التمرير الرأسي. إذا كنت تعمل مع حاويات تمرير أفقية، فستستخدم scroll(inline nearest). ستتوافق قيم animation-range بعد ذلك مع نسب مئوية من عرض التمرير.

            
.horizontal-scroll-container {
  overflow-x: scroll;
  white-space: nowrap;
}

.horizontal-animation {
  animation-name: slideAcross;
  animation-timeline: scroll(inline #horizontal-scroll-container);
  animation-range: 0% 100%; /* Animate across the entire horizontal scrollable width */
}

@keyframes slideAcross {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } /* Example: move elements */
}

            

              
                Copy
              
            
          

النطاقات العكسية

من الممكن تحديد نطاق تكون فيه قيمة البداية أكبر من قيمة النهاية. هذا يخلق نطاقًا عكسيًا. في النطاق العكسي، تتقدم الرسوم المتحركة للأمام عند التمرير لأعلى (أو للخلف في اتجاه التمرير) وللخلف عند التمرير لأسفل.

            
.inverse-scroll-animation {
  animation-name: fadeOut;
  animation-timeline: scroll(block nearest);
  animation-range: 75% 25%; /* Inverse range */
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

            

              
                Copy
              
            
          

مع animation-range: 75% 25%، ستبدأ الرسوم المتحركة عند 75% وتتجه إلى 25%. هذا يعني أنه كلما مررت لأسفل (مما يقلل نسبة التمرير)، تتقدم الرسوم المتحركة من 75% إلى 25%. إذا قمت بالتمرير مرة أخرى لأعلى (مما يزيد نسبة التمرير)، فستتقدم الرسوم المتحركة من 25% مرة أخرى إلى 75%.

المخططات الزمنية والنطاقات المتعددة

يمكن أن يحتوي العنصر على رسوم متحركة متعددة، لكل منها مخططها الزمني ونطاقها الخاص. هذا يسمح برسوم متحركة معقدة متعددة الطبقات. يمكنك أيضًا تعيين نفس الرسوم المتحركة لمخططات زمنية متعددة بنطاقات مختلفة.

دعم المتصفحات والاعتبارات

الرسوم المتحركة المدفوعة بالتمرير، بما في ذلك تثبيت النطاق، هي ميزة جديدة نسبيًا. بينما ينمو الدعم بسرعة، من الضروري التحقق من توافق المتصفحات (على سبيل المثال، على caniuse.com) وتوفير حلول بديلة للمتصفحات القديمة. عادةً، قد لا تدعم المتصفحات القديمة هذه الميزات المتقدمة المدفوعة بالتمرير، وقد لا تعمل الرسوم المتحركة ببساطة أو تعود إلى الرسوم المتحركة التقليدية في CSS إذا تم تنفيذها كتحسين تدريجي.

التحسين التدريجي هو المفتاح: تأكد دائمًا من أن المحتوى الخاص بك يظل متاحًا ويعمل بدون الرسوم المتحركة المدفوعة بالتمرير. يجب أن تعزز الرسوم المتحركة تجربة المستخدم، لا أن تكون ضرورية لها.

حالات الاستخدام العملي والأمثلة العالمية

دعنا نفكر في كيفية تطبيق تثبيت النطاق عبر أنواع مختلفة من مواقع الويب والتطبيقات في جميع أنحاء العالم.

1. السرد التفاعلي والمحتوى التحريري

يمكن للمواقع التي تعرض مقالات طويلة أو قصصًا تفاعلية أو جداول زمنية تاريخية الاستفادة من تثبيت النطاق للكشف عن المحتوى تدريجيًا أثناء تمرير المستخدم. تخيل جدولًا زمنيًا تاريخيًا حيث يتم تمييز حقب مختلفة أو تتحرك الصور لتظهر فقط عندما يصل المستخدم إلى القسم المقابل.

مثال عالمي: يمكن لمعرض متحف افتراضي استخدام تثبيت النطاق لتحريك تفاصيل القطع الأثرية أو النوافذ المنبثقة للسياق التاريخي فقط عندما يقوم المستخدم بالتمرير إلى القطعة الأثرية المحددة المعروضة. على سبيل المثال، قد يرى مستخدم في طوكيو يتصفح معرضًا عن روما القديمة فسيفساء رومانية تتحرك لتظهر عند وصوله إلى هذا القسم، ثم يتلاشى وصف ليظهر أثناء استمراره في التمرير ضمن نطاق هذا المعرض.

2. صفحات منتجات التجارة الإلكترونية

يمكن أن تصبح صفحات المنتجات أكثر جاذبية باستخدام الرسوم المتحركة المدفوعة بالتمرير. على سبيل المثال، يمكن لعارض منتج بزاوية 360 درجة أن يتحرك عبر عروضه أثناء تمرير المستخدم لأسفل الصفحة، أو يمكن أن تظهر إشارات الميزات المتحركة في مكانها عند الكشف عن مواصفات المنتج ذات الصلة.

مثال عالمي: يمكن لمتجر أزياء عبر الإنترنت مقره في باريس عرض فستان جديد. بينما يقوم المستخدمون بالتمرير لأسفل صفحة المنتج، قد تغير عارضة الفستان وضعياتها بمهارة (متحركة عبر نطاق التمرير)، أو قد تظهر رسوم بيانية متحركة توضح أصل القماش أو تفاصيل الإنتاج المستدام، وكلها يتم تشغيلها بواسطة موضع التمرير داخل أقسام منتج معينة.

3. مواقع المحافظ الشخصية والوكالات

يعد عرض الأعمال أمرًا بالغ الأهمية للمصممين والوكالات. تسمح المخططات الزمنية للتمرير بعروض إبداعية حيث تتحرك عناصر المشروع لتصبح في بؤرة التركيز أثناء استكشاف المستخدم للمحفظة.

مثال عالمي: يمكن لاستوديو تصميم جرافيك في البرازيل عرض مشاريعهم. أثناء تصفح الزائر لدراسة حالة مشروع، يمكن لعناصر التصميم المختلفة (مثل الإطارات السلكية أو النماذج الأولية أو التصميمات النهائية) أن تتحرك لتظهر بالتتابع باستخدام نطاقات تمرير مميزة لكل مرحلة. وهذا يخلق تدفقًا سرديًا لدراسة الحالة، يشبه إلى حد كبير تقليب صفحات كتاب رقمي.

4. تجارب الإعداد والبرامج التعليمية

بالنسبة لتطبيقات الويب أو منتجات SaaS، يمكن جعل عملية الإعداد أكثر تفاعلية. يمكن للبرامج التعليمية خطوة بخطوة استخدام المخططات الزمنية للتمرير لتوجيه المستخدمين عبر الميزات، مع ظهور التوضيحات وتمييزات واجهة المستخدم عند نقاط تمرير محددة.

مثال عالمي: قد تقدم شركة ناشئة في مجال التكنولوجيا المالية في سنغافورة منصة استثمار جديدة. يمكن لبرنامجهم التعليمي للإعداد استخدام تثبيت النطاق لتمييز عناصر لوحة المعلومات المختلفة. أثناء تمرير المستخدم عبر قسم البرنامج التعليمي، قد يحرك مخطط معين نقاط بياناته لتظهر، يليه شرح نصي لذلك المخطط، وكل ذلك ضمن شرائح تمرير محددة مسبقًا لكل ميزة.

5. تصور البيانات

يمكن أن تكون تصورات البيانات المعقدة مربكة. يمكن للمخططات الزمنية للتمرير تقسيم البيانات إلى أجزاء قابلة للهضم، وتحريك أجزاء مختلفة من مخطط أو رسم بياني أثناء تمرير المستخدم، ويتم التحكم فيها بواسطة نطاقات دقيقة.

مثال عالمي: قد تقدم منظمة إخبارية عالمية تقريرًا عن بيانات تغير المناخ. أثناء تمرير المستخدمين لأسفل المقال، يمكن أن تظهر أقسام مختلفة من رسم بياني متحرك: أولاً، مخطط شريطي يوضح ارتفاع درجة الحرارة العالمية على مدى عقود، ثم رسم بياني خطي يوضح مستويات ثاني أكسيد الكربون، كل منها يظهر ويتحرك ضمن نطاق التمرير المخصص له على الصفحة، مما يجعل البيانات المعقدة في متناول جمهور عالمي.

نصائح لتثبيت النطاق بفعالية

• ابدأ بنية واضحة: قبل كتابة CSS، حدد بدقة *متى* تريد حدوث الرسوم المتحركة بالنسبة للتمرير. ما هي نقطة التشغيل؟ ما هي نقطة النهاية؟
• استخدم نطاقات تعتمد على النسبة المئوية للحالات العامة: بالنسبة للرسوم المتحركة المرتبطة برؤية منفذ العرض العام أو تقدم التمرير، تكون النسب المئوية (0% إلى 100%) فعالة للغاية ومفهومة.
• استفد من entry و exit لرؤية العنصر: عندما تريد أن تكون الرسوم المتحركة مرتبطة مباشرة بظهور واختفاء عنصر في منفذ العرض، فإن entry و exit هما الكلمات الرئيسية التي يجب استخدامها.
• اختبر على أجهزة ومنافذ عرض مختلفة: يمكن أن يختلف سلوك التمرير قليلاً عبر الأجهزة. اختبر دائمًا الرسوم المتحركة المدفوعة بالتمرير، خاصة تثبيت النطاق، على مجموعة من أحجام الشاشات والأجهزة لضمان سلوك متسق.
• ضع الأداء في الاعتبار: على الرغم من أن الرسوم المتحركة المدفوعة بالتمرير تكون عمومًا ذات أداء جيد، إلا أن الاستخدام المفرط للرسوم المتحركة المعقدة المرتبطة بنطاقات تمرير صغيرة جدًا قد يؤثر على الأداء. قم بتحسين الرسوم المتحركة وتأكد من تطبيقها فقط حيث تضيف قيمة كبيرة.
• استخدم أدوات المطورين: توفر أدوات المطورين في المتصفحات الحديثة (مثل أدوات مطوري Chrome) دعمًا ممتازًا لفحص وتصحيح الرسوم المتحركة المدفوعة بالتمرير. يمكنك غالبًا تصور المخططات الزمنية للتمرير ونطاقات الرسوم المتحركة مباشرة في المفتش.
• وفر حلولاً بديلة: كما ذكرنا، تأكد من أن موقعك يعمل بشكل جيد بدون الرسوم المتحركة المدفوعة بالتمرير. قد يتضمن ذلك استخدام استعلامات وسائط CSS أو JavaScript لاكتشاف الدعم وتوفير رسوم متحركة بديلة أو محتوى ثابت.

الخاتمة

يعد تثبيت نطاق المخطط الزمني للتمرير في CSS تحسينًا قويًا يضفي مستوى جديدًا من الدقة والتحكم على الرسوم المتحركة المدفوعة بالتمرير. من خلال السماح للمطورين بتحديد حدود دقيقة للرسوم المتحركة، فإنه يساعد على إنشاء تجارب مستخدم أكثر صقلًا وقصدًا وجاذبية. سواء كنت تبني روايات تفاعلية، أو عروض منتجات ديناميكية، أو تصورات بيانات غنية بالمعلومات، فإن فهم وتنفيذ animation-range سيمكنك من صياغة رسوم متحركة متطورة تستجيب بذكاء لسلوك تمرير المستخدم.

مع استمرار نضج دعم المتصفحات، من المقرر أن تصبح الرسوم المتحركة المدفوعة بالتمرير مع تثبيت النطاق عنصرًا أساسيًا في مجموعة أدوات مطور الويب الحديث، مما يتيح التحكم الإبداعي في الحركة التي تبدو أكثر تكاملاً وطبيعية من أي وقت مضى. احتضن هذه الميزة لرفع مستوى تصميمات الويب الخاصة بك وجذب جمهورك العالمي برسوم متحركة سلسة ومتحكم فيها بدقة.